<template>
  <!-- 新增对话框 -->
  <el-dialog
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose"
  >
    <el-form ref="ruleForm" :model="report" :rules="rules" label-width="120px" style="margin-right: 50px;">
      <h1><i class="el-icon-s-check"/> 审核处理举报 </h1>
      <el-form-item label="ID" width="120px;">
        <el-input v-model.trim="report.id" disabled/>
      </el-form-item>
      <el-form-item label="举报人ID">
        <el-input v-model.trim="report.userId" disabled/>
      </el-form-item>
      <el-form-item label="举报的实体" prop="fail">
        <el-radio-group v-model="report.entityType">
          <el-radio-button :label="0" disabled>文章</el-radio-button>
          <el-radio-button :label="1" disabled>留言</el-radio-button>
          <el-radio-button :label="2" disabled>回复</el-radio-button>
          <el-radio-button :label="3" disabled>私信</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="举报原因" prop="fail">
        <el-radio-group v-model="report.reportType">
          <el-radio-button :label="0" disabled>作品侵权</el-radio-button>
          <el-radio-button :label="1" disabled>涉嫌违法</el-radio-button>
          <el-radio-button :label="2" disabled>内容不雅</el-radio-button>
          <el-radio-button :label="3" disabled>骚扰谩骂</el-radio-button>
          <el-radio-button :label="4" disabled>虚假宣传</el-radio-button>
          <el-radio-button :label="5" disabled>低质灌水</el-radio-button>
          <el-radio-button :label="6" disabled>其它</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="补充说明">
        <el-input v-model.trim="report.description" disabled/>
      </el-form-item>
      <el-form-item label="举报目标ID">
        <el-input v-model.trim="report.entityId" disabled/>
      </el-form-item>
      <el-form-item label="文章标题" width="120px;">
        <el-input v-model.trim="report.title" disabled/>
      </el-form-item>
      <el-form-item label="举报内容">
        <el-input v-model.trim="report.content" disabled/>
      </el-form-item>
      <el-form-item label="举报日期">
        <el-input v-model.trim="report.createTime" disabled/>
      </el-form-item>
      <el-form-item label="处理结果说明" prop="result">
        <el-input v-model.trim="report.result" clearable maxlength="255" show-word-limit  placeholder="请输入审查处理结果"/>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="report.status">
          <el-radio-button :label="0">待处理</el-radio-button>
          <el-radio-button :label="1">已处理</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="更新日期">
        <el-input v-model.trim="report.updateTime" disabled/>
      </el-form-item>
      <el-form-item align="right">
        <el-button v-permission="'report:audit'" @click="cancel('ruleForm')">取消</el-button>
        <el-button v-permission="'report:audit'" type="primary" @click="submitForm('ruleForm')">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import api from '@/api/report'

export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['report', 'dialogVisible'],
  data() {
    return {
      rules: {
        result: [
          { required: true, message: '处理结果说明不能为空', trigger: 'blur' },
          { min: 10, max: 255, message: '长度在 10 到 255 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 关闭窗口
    handleClose() {
      this.$emit('handleClose')
    },
    // 取消
    cancel(formName) {
      this.$refs[formName].resetFields()
      this.$emit('handleClose')
    },
    // 提交表单数据
    submitForm(formRef) {
      this.$refs[formRef].validate((valid) => {
        if (valid) {
          // 校验通过，提交表单数据
          if (this.report.status === '0') {
            this.$message.error('请选择 状态 为 已处理')
            return
          }
          api.auditReport(this.report).then(response => {
            if (response.code === 200) {
              this.$emit('fetchData')
              this.$emit('handleClose')
              this.$message.success(response.message)
            } else {
              this.$message.error(response.message)
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
h1 {
  text-align: center;
  margin-bottom: 50px;
}
</style>
